<!--
 * @Author: luoyuxiang 398165@qq.com
 * @Date: 2025-03-19 16:57:34
 * @LastEditors: luoyuxiang 398165@qq.com
 * @LastEditTime: 2025-03-22 21:55:27
 * @FilePath: \formula-syn-vue\src\views\project\article\components\ArticleInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!-- 消息提示 -->
    <el-dialog
      v-model="props.visible"
      title="提示信息"
      top="10vh"
      width="1050px"
      append-to-body
      @close="$emit('close')"
    >
      <el-card class="fixed-height-card">
        <template #header>{{ formData.configName }}</template>
        <div class="content" v-html="formData.configValue"></div>
      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="$emit('close')">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import ConfigAPI, { ConfigPageVO, ConfigForm, ConfigPageQuery } from "@/api/system/config";

const props = defineProps({
  code: {
    type: String,
    required: true,
  },
  visible: {
    type: Boolean,
    required: true,
  },
});

// 监听 visible 的变化
watch(
  () => props.visible,
  (newVal) => {
    if (newVal) {
      handleQuery();
    }
  }
);

const dataFormRef = ref();

const formData = reactive<ConfigForm>({
  id: undefined,
  configName: "",
  configKey: "",
  configValue: "",
  remark: "",
});

/**
 * 从字典中获取数据
 */
function handleQuery() {
  if (props.code) {
    ConfigAPI.getConfigByKey(props.code).then((data) => {
      Object.assign(formData, data);
    });
  }
}
</script>

<style scoped>
/* 固定高度的卡片 */
.fixed-height-card {
  height: 600px; /* 固定高度 */
  display: flex;
  flex-direction: column;
}

/* 内容区域 */
.content {
  flex: 1; /* 撑满剩余高度 */
  overflow-y: auto; /* 超出高度时显示滚动条 */
  /* padding: 12px; */
  font-size: 14px;
  line-height: 1.5;
}
</style>
